<template>
  <common-page :title="`分析（${currentIp}）`">
    <el-button slot="header" @click="back">返回</el-button>

    <div class="analysis-detail-wrap" slot="content">
      <div class="column-divided"></div>
      <div class="grid-column-3">
        <div class="chart-container">
          <title-chart
            title="访问状态分布"
            type="chart-cirque"
            :dataset="columnOption1"
            v-loading="loading"
          ></title-chart>
        </div>
        <div class="chart-container">
          <title-chart
            title="近7日访问量趋势图"
            type="chart-scatter"
            :dataset="columnOption2"
            v-loading="loading2"
          ></title-chart>
        </div>
      </div>
      <div class="column-divided"></div>
      <div class="grid-column-1">
        <div class="chart-container">
          <title-chart
            title="访问流量分析"
            type="chart-bar"
            :dataset="columnOption3"
            v-loading="loading3"
          ></title-chart>
        </div>
      </div>
    </div>
  </common-page>
</template>

<script>
import IconKpi from "@/components/IconKpi";
import TitleChart from "@/components/EChart/TitleChart";
import {
  fetchIPInfo,
  fetchVisitStatus,
  fetch7DaysVisits,
  fetchUpFlow,
  fetchDownFlow,
} from "@/api/apisecurity/accesssource/accesssource.js";
import BaseList from "@/mixins/BaseList";

export default {
  name: "index",
  mixins: [BaseList],
  components: {
    IconKpi,
    TitleChart,
  },
  props: {
    currentIp: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      flag: false, //没提示
      loading: false,
      loading2: false,
      loading3: false,
      ipConfig: {},
      kpi_1: {
        icon: "iconfont icon-dizhi_2",
        color: "#e69138",
        label: "最后一次访问时间：",
        value: 0,
      },
      otherConfig: {
        label1: "访问量总数",
        value1: "0",
        label2: "当日访问量",
        value2: "0",
      },
      columnOption1: {
        dimensions: ["name", "value"],
        source: [],
        option: {
          color: [
            "#448ff7",
            "#72c141",
            "#e69137",
            "#e13c3a",
            "#D87c7c",
            "#919E8B",
            "#D7AB82",
          ],
          tooltip: {
            show: true, //显示提示框
            formatter: function (params) {
              return `${params.name + ": " + params.data.value + "次"}`;
            },
          },
        },
      },
      columnOption2: {
        dimensions: ["date", "value"],
        source: [],
        option: {
          nameList: ["次数"],
          xAxis: {
            show: true,
            type: "category",
            axisLine: {
              show: true,
            }, // 坐标轴线
            axisTick: {
              show: false,
            }, // 坐标轴刻度
            axisLabel: {
              show: true,
              interval: 0,
              rotate: -15,
              align: "center",
              width: 45,
              margin: 20,
              // overflow: "breakAll",
              // ellipsis: "...",
            }, // 坐标轴标签
            splitLine: {
              show: false,
            },
          },
        },
      },
      columnOption3: {
        dimensions: ["日期", "上行流量", "下行流量"],
        source: [],
        option: {
          color: ["#72c240", "#448ff7"],
          legend: {
            show: true,
            data: ["上行", "下行"],
          },
          yAxis: {
            name: "单位/KB",
          },
        },
      },
    };
  },
  mounted() {
    this.getIPInfo();
    this.getAnalysisData();
    this.getVisitStatus();
    this.get7DaysVisits();
    this.kpi_1.value = this.currentIp;
  },
  methods: {
    back() {
      this.$emit("back");
    },
    clue(m) {
      if (!this.flag) {
        this.handleListTips(m);
        this.flag = true;
      }
    },
    /**
     * IP信息
     */
    getIPInfo() {
      fetchIPInfo({ ip: this.currentIp }).then((res) => {
        if (res && res.code === 200) {
          let data = res.rows;
          this.kpi_1.label = "最后一次访问时间：" + data.lastTime;
          this.otherConfig.value1 = data.totalVisit;
          this.otherConfig.value2 = data.todayVisit;
        } else {
          this.clue(res);
        }
      });
    },
    /**
     * 访问状态分布
     */
    getVisitStatus() {
      this.loading = true;
      fetchVisitStatus({ ip: this.currentIp })
        .then((res) => {
          if (res && res.code === 200) {
            this.columnOption1.source = res.data.errorDist;
          } else {
            this.clue(res);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /**
     * 近7日访问量趋势图
     */
    get7DaysVisits() {
      this.loading2 = true;
      fetch7DaysVisits({ ip: this.currentIp })
        .then((res) => {
          if (res && res.code === 200) {
            this.columnOption2.source = res.rows.reverse();
          } else {
            this.clue(res);
          }
        })
        .finally(() => {
          this.loading2 = false;
        });
    },

    /**
     * 流量分析
     */
    getAnalysisData() {
      this.loading3 = true;
      Promise.all([this.getUpData(), this.getDownData()])
        .then((res) => {
          let analyse = res[0].analyse;

          analyse.forEach((item, index) => {
            item.down = res[1].analyse[index].down;
          });

          analyse = analyse.slice(0, 12).reverse();
          this.columnOption3.source = analyse.reduce((r, c) => {
            r.push({
              日期: c.date,
              上行流量: c.up,
              下行流量: c.down,
            });
            return r;
          }, []);
        })
        .finally(() => {
          this.loading3 = false;
        });
    },

    //上行流量
    getUpData() {
      return new Promise((resolve, reject) => {
        fetchUpFlow({ ip: this.currentIp }).then((res) => {
          if (res && res.code === 200) {
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },

    //下行流量
    getDownData() {
      return new Promise((resolve, reject) => {
        fetchDownFlow({ ip: this.currentIp }).then((res) => {
          if (res && res.code === 200) {
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.analysis-detail-wrap {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .grid-column-4 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr;
  }

  .grid-column-3 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .grid-column-1 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr;
  }

  .chart-container {
    height: 400px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
  }

  .column-divided {
    height: 12px;
    width: 100%;
  }
}
::v-deep .common-header-style {
  background-color: rgba(23, 119, 206, 0.2);
  color: #000;
}
</style>
